<template>
  <el-tag v-for="item in items" @click="handleClick(item.path)" :key="item.label" :type="item.type" effect="dark">
    {{ item.label }}
  </el-tag>
</template>

<script setup lang="tsx" name="useProTable">
import { useAuthStore } from "@/stores/modules/auth";
import { type TagProps } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

type Item = { type: TagProps["type"]; label: string; path: string };
const router = useRouter();
const authStore = useAuthStore();
const items = ref<Array<Item>>([
  { type: "info", label: `待分拣(${authStore.dispatchTag.sort})`, path: "/cityLevel/cityDispatch/dispatch/sort" },
  { type: "info", label: `待选单(${authStore.dispatchTag.select})`, path: "/cityLevel/cityDispatch/dispatch/select" },
  { type: "info", label: `待取货(${authStore.dispatchTag.take})`, path: "/cityLevel/cityDispatch/dispatch/take" },
  { type: "info", label: `配送/取货中(${authStore.dispatchTag.pick})`, path: "/cityLevel/cityDispatch/dispatch/pick" },
  { type: "info", label: `配送异常(${authStore.dispatchTag.unusual})`, path: "/cityLevel/cityDispatch/dispatch/unusual" },
  { type: "info", label: `已完成(${authStore.dispatchTag.success})`, path: "/cityLevel/cityDispatch/dispatch/success" }
]);
const props = defineProps<{
  info: number;
}>();
console.log("这是传递的信息", props.info);
items.value[props.info].type = "primary";
const handleClick = (path: string) => {
  router.push({ path });
};

onMounted(() => {
  authStore.setDispatchTagsViewSort();
  authStore.setDispatchTagsViewSelect();
  authStore.setDispatchTagsViewTake();
  authStore.setDispatchTagsViewPick();
  authStore.setDispatchTagsViewUnusual();
  authStore.setDispatchTagsViewSuccess();
});
</script>
<style lang="scss" scoped>
.form-container {
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  .btn-container {
    display: inline-block;
    float: right;
    vertical-align: middle;
    ::v-deep .el-button > span {
      font-size: 13px;
    }
  }
  .el-form {
    display: inline-block;
    ::v-deep .el-form-item__label {
      font-size: 13px;
    }
  }
  .form-line {
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
    .el-input {
      width: 170px;
    }
    .el-select {
      width: 170px;
    }
  }
}
.table-container {
  padding: 40px 10px;
  padding-bottom: 60px;
  background-color: white;
  .pagination-container {
    // display: inline-block;
    float: right;
    margin-top: 20px;
    background-color: white;
  }
}
::v-deep .el-tag--dark {
  margin: 5px;
  cursor: pointer;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
